import React, { Component } from 'react';
import PageTitle from '../../components/page-title';
import MUtil from '../../utils/mm';
import User from '../../service/user-service';
import Pagination from '../../utils/pagination'
import TableList from '../../utils/tableList'

const _mm = new MUtil()
const _user = new User();

class UserList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			list: [],
			currentPage: 1,
		 };
	}
	//
	componentDidMount() {
		this.loadUserList()
	}
	// 获取列表数据
	loadUserList() {
		_user.getUserList(this.state.currentPage).then(res=>{
			this.setState(res)
			console.log(this.state)
		},errMsg=>{
			this.setState({
				list: []
			});
			_mm.errorTips(errMsg)
		})
	}
	// 页数发生变化
	onPageNumChange(pageNum) {
		this.setState({
			currentPage: pageNum
		}, () => {
			this.loadUserList()
		})
	}

	render() {
		return (
			<div id="page-wrapper">
				<PageTitle title="用户列表"></PageTitle>
				<TableList tableHeads={['ID','用户名','邮箱','电话','注册时间']}>
					{
						this.state.list.map((user,index) => {
							return (
								<tr key={index}>
									<td>{user.id}</td>
									<td>{user.username}</td>
									<td>{user.email}</td>
									<td>{user.phone}</td>
									<td>{new Date(user.createTime).toLocaleString()}</td>
								</tr>
							)
						})
					}
				</TableList>
				<Pagination
					current={this.state.currentPage}
					total={this.state.total}
					onChange={(pageNum)=>this.onPageNumChange(pageNum)}
					showQuickJumper={true}
				/>
			</div>
		);
	}
}

export default UserList;
